<template>
  <el-card v-if="computeBoolen(computedConfig.show, true)"
           :shadow="computedConfig.shadow"
           :body-style="computedConfig.bodyStyle"
           :style="computedConfig.style"
  >
    <template slot="header">
      <div class="clearfix">
        <div>
          <span class="title">{{ computedConfig.label }}</span>
        </div>
        <div class="button-group">
          <template v-for="(btn, btnIndex) in computedConfig.headerBtn">
            <el-button
                v-if="computeBoolen(btn.show, true)"
                :key="btnIndex"
                :size="btn.size"
                :type="btn.type"
                :plain="btn.plain"
                :round="btn.round"
                :circle="btn.circle"
                :loading="btn.loading"
                :disabled="btn.disabled"
                :icon="btn.icon"
                :autofocus="btn.autofocus"
                :native-type="btn.nativeType"

                @click="btn.click(formData)"
            >
              {{ btn.text }}
            </el-button>
          </template>
        </div>
      </div>
    </template>

    <xForm v-model="formData" :config="computedConfig">
      <template v-for="formItem in computedConfig.item">
        <!-- 自定义表单区域 -->
        <slot v-if="typeof formItem.slot === 'string'" :slot="formItem.slot" :name="formItem.slot" :config="formItem" />
        <!-- 自定义表单字段 -->
        <slot v-else-if="getComponentType(formItem) === 'slot'" :slot="formItem.name" :name="formItem.name" />
      </template>
    </xForm>

  </el-card>
</template>

<script>
import mixinComponent from "../../common/xMixin";
import {merge} from "lodash";
import {getComponentType} from "../../common/util";
export default {
  name: "xCard",
  mixins: [mixinComponent()],
  data() {
    return {
    }
  },
  computed: {
    computedConfig() {
      const c = {}
      merge(c, this.globalConfig.xcard, this.config)
      return c
    },
  },
  methods: {
    // 获取动态组件类型
    getComponentType: getComponentType,
  }
}
</script>

<style scoped lang="scss">
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    font-size: 18px;
  }

  .button-group {

  }

}
</style>
